<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简历</title>
    <link href="./css/bootstrap-4.4.1.css" rel="stylesheet">
    <link rel="icon" href="./images/gongzhenglogo.png">
    <style>
        body {
            background: #f7f9fb;
        }
        .resume-container {
            max-width: 900px;
            margin: 30px auto;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 6px 32px 0 rgba(0,0,0,0.08);
            padding: 36px 40px 32px 40px;
        }
        .resume-title {
            text-align: center;
            font-size: 2.1rem;
            font-weight: 700;
            color: #1976ed;
            margin-bottom: 6px;
            letter-spacing: 2px;
        }
        .resume-subtitle {
            text-align: center;
            color: #888;
            font-size: 1.08rem;
            margin-bottom: 24px;
        }
        .section-bar {
            background: #1976ed;
            color: #fff;
            font-weight: 600;
            padding: 7px 18px;
            border-radius: 6px 6px 0 0;
            font-size: 1.08rem;
            margin-bottom: 0;
            display: inline-block;
        }
        .section-content {
            border: 1px solid #e5e9ef;
            border-top: none;
            border-radius: 0 0 6px 6px;
            padding: 18px 18px 10px 18px;
            margin-bottom: 24px;
            background: #fafdff;
        }
        .base-info-table {
            width: 100%;
            margin-bottom: 0;
        }
        .base-info-table td {
            padding: 4px 12px 4px 0;
            font-size: 1.02rem;
            color: #333;
        }
        .avatar-box {
            float: right;
            width: 90px;
            height: 110px;
            margin-left: 18px;
            margin-bottom: 8px;
            background: #f3f3f3;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .avatar-img {
            width: 70px;
            height: 90px;
            border-radius: 8px;
            background: #ccc url('./images/avatar.png') center/cover no-repeat;
        }
        .section-label {
            font-weight: 600;
            color: #1976ed;
            margin-right: 6px;
        }
        .edu-item, .work-item {
            margin-bottom: 12px;
        }
        .edu-title, .work-title {
            font-weight: 600;
            color: #1976ed;
            font-size: 1.08rem;
        }
        .edu-meta, .work-meta {
            color: #888;
            font-size: 0.98rem;
            margin-bottom: 2px;
        }
        .skill-bar-bg {
            background: #e5e9ef;
            border-radius: 8px;
            height: 10px;
            width: 120px;
            display: inline-block;
            margin: 0 10px 0 0;
            vertical-align: middle;
        }
        .skill-bar {
            background: #1976ed;
            height: 10px;
            border-radius: 8px;
            display: inline-block;
            vertical-align: middle;
        }
        .honor-list, .self-eval-list {
            margin: 0 0 0 18px;
            padding: 0;
        }
        .honor-list li, .self-eval-list li {
            margin-bottom: 6px;
            font-size: 1rem;
            color: #444;
        }
        @media (max-width: 768px) {
            .resume-container {
                padding: 16px 4vw 16px 4vw;
            }
            .avatar-box {
                float: none;
                margin: 0 auto 12px auto;
                display: block;
            }
        }
    </style>
</head>
<body>
    <div class="resume-container">
        <div class="resume-title">个人简历</div>
        <div class="resume-subtitle">努力超越自己，每天进步一点点</div>

        <div class="section-bar">基本信息</div>
        <div class="section-content clearfix">
            <div class="avatar-box">
                <div class="avatar-img"></div>
            </div>
            <table class="base-info-table">
                <tr>
                    <td><span class="section-label">姓名：</span>全民简历</td>
                    <td><span class="section-label">年龄：</span>32岁</td>
                    <td><span class="section-label">籍贯：</span>上海</td>
                </tr>
                <tr>
                    <td><span class="section-label">性别：</span>男</td>
                    <td><span class="section-label">电话：</span>15088888883</td>
                    <td><span class="section-label">工作年限：</span>3年经验</td>
                </tr>
                <tr>
                    <td colspan="2"><span class="section-label">邮箱：</span>qmjianli@qq.com</td>
                </tr>
            </table>
        </div>

        <div class="section-bar">求职意向</div>
        <div class="section-content">
            <span class="section-label">职位：</span>行政专员
            <span class="section-label" style="margin-left:24px;">城市：</span>上海
            <span class="section-label" style="margin-left:24px;">期望薪资：</span>7000/月
            <span class="section-label" style="margin-left:24px;">到岗时间：</span>一月内到岗
        </div>

        <div class="section-bar">教育背景</div>
        <div class="section-content">
            <div class="edu-item">
                <div class="edu-title">2012.09 - 2016.07  全民简历师范大学 <span style="float:right;">工商管理（本科）</span></div>
                <div class="edu-meta">GPA 3.66/4（专业前5%）</div>
                <div>主修课程：管理学、市场营销学、经济法、经济学原理、财务会计、管理信息系统、财务分析、统计学、市场调查、管理沟通、商务英语等。</div>
            </div>
        </div>

        <div class="section-bar">工作经验</div>
        <div class="section-content">
            <div class="work-item">
                <div class="work-title">2018.09 - 至今  全民简历科技有限公司 <span style="float:right;">行政专员</span></div>
                <div class="work-meta">负责本公司行政人事管理日常事务，协助处理公司内部各部门之间的综合协调，落实公司规章制度，沟通外部对接，负责上传下达下属、起草会议文件及通知等文书工作，参与企业文化建设，协助招聘、培训、考勤管理等。</div>
            </div>
            <div class="work-item">
                <div class="work-title">2016.09 - 2018.08  上海萤辉网络科技有限公司 <span style="float:right;">行政专员</span></div>
                <div class="work-meta">负责公司日常行政事务管理，资产管理；
                    负责公司前台接待、会议安排、办公环境维护等；
                    协助人事招聘、员工入职、离职手续办理，员工考勤、档案管理；
                    协助组织公司各类活动，公文撰写、文件归档、资料管理等。</div>
            </div>
        </div>

        <div class="section-bar">技能特长</div>
        <div class="section-content">
            <div>
                <span class="section-label">语言能力：</span>普通话标准，英语四级
            </div>
            <div>
                <span class="section-label">办公软件：</span>
                Word
                <span class="skill-bar-bg"><span class="skill-bar" style="width:90px"></span></span>
                Excel
                <span class="skill-bar-bg"><span class="skill-bar" style="width:80px"></span></span>
                PowerPoint
                <span class="skill-bar-bg"><span class="skill-bar" style="width:70px"></span></span>
            </div>
            <div>
                <span class="section-label">计算机：</span>熟悉Windows操作系统，掌握基础网络知识
            </div>
        </div>

        <div class="section-bar">荣誉证书</div>
        <div class="section-content">
            <ul class="honor-list">
                <li>全国英语四级证书</li>
                <li>优秀员工奖</li>
                <li>办公软件高级应用证书</li>
            </ul>
        </div>

        <div class="section-bar">自我评价</div>
        <div class="section-content">
            <ul class="self-eval-list">
                <li>工作积极，responsibility，善于与同事沟通协作，善于在工作中总结经验。</li>
                <li>具备较强的组织、协调、沟通能力，能够独立完成各项工作任务。</li>
                <li>学习能力强，适应能力好，能熟练操作各类办公软件。</li>
            </ul>
        </div>
    </div>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    // 获取 URL 参数
    function getQueryParam(name) {
        const urlParams = new URLSearchParams(window.location.search);
        return urlParams.get(name);
    }

    $(function() {
        const name = getQueryParam('name');
        if (!name) {
            alert('未获取到姓名参数');
            return;
        }
        // 请求简历数据
        $.ajax({
            url: 'http://localhost:8080/api/jianli/byName',
            method: 'GET',
            data: { name: name },
            success: function(res) {
                // 兼容返回数组或对象
                let data = Array.isArray(res) ? res[0] : res;
                if (!data) {
                    alert('未找到该用户简历');
                    return;
                }
                // 渲染基本信息
                $('.base-info-table tr').eq(0).find('td').eq(0).html('<span class="section-label">姓名：</span>' + data.name);
                $('.base-info-table tr').eq(0).find('td').eq(1).html('<span class="section-label">年龄：</span>' + data.age + '岁');
                $('.base-info-table tr').eq(0).find('td').eq(2).html('<span class="section-label">籍贯：</span>' + data.nativePlace);
                $('.base-info-table tr').eq(1).find('td').eq(0).html('<span class="section-label">性别：</span>' + data.gender);
                $('.base-info-table tr').eq(1).find('td').eq(1).html('<span class="section-label">电话：</span>' + data.phone);
                $('.base-info-table tr').eq(1).find('td').eq(2).html('<span class="section-label">工作年限：</span>' + data.workExperience);
                $('.base-info-table tr').eq(2).find('td').eq(0).html('<span class="section-label">邮箱：</span>' + data.email);
            },
            error: function() {
                alert('获取简历信息失败');
            }
        });
    });
</script>
</html>